<template>
  <div v-loading="loading" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import china from '@/map/china.json'
echarts.registerMap('china', china)
import resize from './mixins/resize'
// import { moneyFormat, moneyFormatUnit } from '@/utils/ruoyi'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      loading: false,
      list: [{
        'name': '江苏',
        'value': 3
      }, {
        'name': '上海',
        'value': 1
      }, {
        'name': '广东',
        'value': 2
      }, {
        'name': '天津',
        'value': 2
      }, {
        'name': '重庆',
        'value': 1
      }, {
        'name': '北京',
        'value': 4
      }, {
        'name': '湖北',
        'value': 2
      }, {
        'name': '湖南',
        'value': 6
      }, {
        'name': '河南',
        'value': 1
      }]
    }
  },
  watch: {
    chartData() {
      this.loading = true
      this.initChart()
      this.loading = false
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {},
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      var _this = this
      var option = {
        tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 10,
            calculable: true,
            inRange: {
              color: ['#4C78DA', '#4344C3', '#453BB4', '#4D32A5', '#572794']
            }
          },
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
              normal: {
                textStyle: {
                  color: '#fff',
                  fontSize: 11,
                  fontWeight: 'bold'
                },
                formatter(p) {
                  var info = _this.list.find(i => i.name === p.name)
                  if (info) {
                    console.log(info.value)
                    return p.name + ': ' + info.value
                  } else {
                    return ''
                  }
                  // arr.forEach(info => {
                  //   if (info.name === p.name) {
                  //     return info.name + '123'
                  //   } else {
                  //     return ''
                  //   }
                  // })
                },
                show: true // 是否显示对应地名
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#3497DC',
                borderColor: 'rgba(0, 0, 0, 0.6)'
              },
              emphasis: {}
            }
          },
          series: [
            {
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '已投项目个数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: this.list
            }
          ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
</style>
